<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面经汇总 | 前端档案</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="前端通关宝典">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.e02fc531.css" as="style"><link rel="preload" href="/assets/js/app.bf44e39b.js" as="script"><link rel="preload" href="/assets/js/2.db7a59af.js" as="script"><link rel="preload" href="/assets/js/53.3938d117.js" as="script"><link rel="prefetch" href="/assets/js/10.3bbe2f24.js"><link rel="prefetch" href="/assets/js/100.43061c81.js"><link rel="prefetch" href="/assets/js/101.2e8a188c.js"><link rel="prefetch" href="/assets/js/102.3f4f14f0.js"><link rel="prefetch" href="/assets/js/103.5ed45f48.js"><link rel="prefetch" href="/assets/js/104.29ef9283.js"><link rel="prefetch" href="/assets/js/105.e4051d70.js"><link rel="prefetch" href="/assets/js/106.ec073f00.js"><link rel="prefetch" href="/assets/js/107.9b165150.js"><link rel="prefetch" href="/assets/js/108.c0031864.js"><link rel="prefetch" href="/assets/js/109.06bb75a7.js"><link rel="prefetch" href="/assets/js/11.402e3434.js"><link rel="prefetch" href="/assets/js/110.edc92528.js"><link rel="prefetch" href="/assets/js/111.e50e0cca.js"><link rel="prefetch" href="/assets/js/112.b0decdf4.js"><link rel="prefetch" href="/assets/js/113.f0801886.js"><link rel="prefetch" href="/assets/js/114.25ab8fa4.js"><link rel="prefetch" href="/assets/js/115.36fc62f3.js"><link rel="prefetch" href="/assets/js/116.8df9a6aa.js"><link rel="prefetch" href="/assets/js/117.1ec0fada.js"><link rel="prefetch" href="/assets/js/118.51c54869.js"><link rel="prefetch" href="/assets/js/119.d708669d.js"><link rel="prefetch" href="/assets/js/12.eba9a66a.js"><link rel="prefetch" href="/assets/js/120.a44efeea.js"><link rel="prefetch" href="/assets/js/121.581a4ae4.js"><link rel="prefetch" href="/assets/js/122.e54e19e1.js"><link rel="prefetch" href="/assets/js/123.62aa41d0.js"><link rel="prefetch" href="/assets/js/124.c51c6b7f.js"><link rel="prefetch" href="/assets/js/125.68055811.js"><link rel="prefetch" href="/assets/js/126.8b16d246.js"><link rel="prefetch" href="/assets/js/127.fc7608d6.js"><link rel="prefetch" href="/assets/js/128.0df431fc.js"><link rel="prefetch" href="/assets/js/129.77241cfd.js"><link rel="prefetch" href="/assets/js/13.a3e65817.js"><link rel="prefetch" href="/assets/js/130.2bf0b622.js"><link rel="prefetch" href="/assets/js/131.77da1093.js"><link rel="prefetch" href="/assets/js/132.c1ac84bc.js"><link rel="prefetch" href="/assets/js/133.001af559.js"><link rel="prefetch" href="/assets/js/134.98ff69db.js"><link rel="prefetch" href="/assets/js/135.b91963f4.js"><link rel="prefetch" href="/assets/js/136.e3df531a.js"><link rel="prefetch" href="/assets/js/137.157c5a5f.js"><link rel="prefetch" href="/assets/js/138.1d3a1791.js"><link rel="prefetch" href="/assets/js/139.9e17df54.js"><link rel="prefetch" href="/assets/js/14.bd9cc5f8.js"><link rel="prefetch" href="/assets/js/140.22839840.js"><link rel="prefetch" href="/assets/js/141.dbde614d.js"><link rel="prefetch" href="/assets/js/142.5a6858ba.js"><link rel="prefetch" href="/assets/js/143.e26d707c.js"><link rel="prefetch" href="/assets/js/144.5b1fbe13.js"><link rel="prefetch" href="/assets/js/145.09921e20.js"><link rel="prefetch" href="/assets/js/146.8ea606b7.js"><link rel="prefetch" href="/assets/js/147.41bda9d5.js"><link rel="prefetch" href="/assets/js/148.d89f18bc.js"><link rel="prefetch" href="/assets/js/149.16aa39c9.js"><link rel="prefetch" href="/assets/js/15.deb2f25a.js"><link rel="prefetch" href="/assets/js/150.07798494.js"><link rel="prefetch" href="/assets/js/151.6732ee94.js"><link rel="prefetch" href="/assets/js/152.c644167e.js"><link rel="prefetch" href="/assets/js/153.040f256b.js"><link rel="prefetch" href="/assets/js/154.1cec3035.js"><link rel="prefetch" href="/assets/js/155.a4b51a17.js"><link rel="prefetch" href="/assets/js/156.095b78e0.js"><link rel="prefetch" href="/assets/js/157.eb262a26.js"><link rel="prefetch" href="/assets/js/158.35756e8c.js"><link rel="prefetch" href="/assets/js/159.6ac43664.js"><link rel="prefetch" href="/assets/js/16.c7b17381.js"><link rel="prefetch" href="/assets/js/160.0a56c40c.js"><link rel="prefetch" href="/assets/js/161.8320b48a.js"><link rel="prefetch" href="/assets/js/162.09ba1172.js"><link rel="prefetch" href="/assets/js/163.f7fb82e8.js"><link rel="prefetch" href="/assets/js/164.ab9df42b.js"><link rel="prefetch" href="/assets/js/165.f012858f.js"><link rel="prefetch" href="/assets/js/166.b3f190e3.js"><link rel="prefetch" href="/assets/js/167.43b66e59.js"><link rel="prefetch" href="/assets/js/168.4eb162d3.js"><link rel="prefetch" href="/assets/js/169.0375d2cf.js"><link rel="prefetch" href="/assets/js/17.da61c942.js"><link rel="prefetch" href="/assets/js/170.90c9c235.js"><link rel="prefetch" href="/assets/js/171.672fc257.js"><link rel="prefetch" href="/assets/js/172.dfa9d8d9.js"><link rel="prefetch" href="/assets/js/173.61a6ec8e.js"><link rel="prefetch" href="/assets/js/174.4f4ef0d7.js"><link rel="prefetch" href="/assets/js/175.675d01d1.js"><link rel="prefetch" href="/assets/js/176.5bd1bcb7.js"><link rel="prefetch" href="/assets/js/177.4355dadd.js"><link rel="prefetch" href="/assets/js/178.79ed29b8.js"><link rel="prefetch" href="/assets/js/179.2247dc30.js"><link rel="prefetch" href="/assets/js/18.6e554767.js"><link rel="prefetch" href="/assets/js/180.db79361a.js"><link rel="prefetch" href="/assets/js/181.85a33295.js"><link rel="prefetch" href="/assets/js/182.0bc317bc.js"><link rel="prefetch" href="/assets/js/183.7769a38e.js"><link rel="prefetch" href="/assets/js/184.9b0aba05.js"><link rel="prefetch" href="/assets/js/185.f6dc87bd.js"><link rel="prefetch" href="/assets/js/186.e3b7de00.js"><link rel="prefetch" href="/assets/js/187.a6dadcea.js"><link rel="prefetch" href="/assets/js/188.d3f8b0e3.js"><link rel="prefetch" href="/assets/js/189.1112499f.js"><link rel="prefetch" href="/assets/js/19.f800e0d1.js"><link rel="prefetch" href="/assets/js/190.e3255e84.js"><link rel="prefetch" href="/assets/js/191.34deece6.js"><link rel="prefetch" href="/assets/js/192.69821c0e.js"><link rel="prefetch" href="/assets/js/193.769a5088.js"><link rel="prefetch" href="/assets/js/194.afaa2cde.js"><link rel="prefetch" href="/assets/js/195.5b94bbc6.js"><link rel="prefetch" href="/assets/js/196.3b078264.js"><link rel="prefetch" href="/assets/js/197.2d9585d3.js"><link rel="prefetch" href="/assets/js/198.3095d8b8.js"><link rel="prefetch" href="/assets/js/199.79b6db11.js"><link rel="prefetch" href="/assets/js/20.4a74a968.js"><link rel="prefetch" href="/assets/js/200.c309ef7a.js"><link rel="prefetch" href="/assets/js/201.bded46e8.js"><link rel="prefetch" href="/assets/js/202.801fb3ea.js"><link rel="prefetch" href="/assets/js/203.b9933f5e.js"><link rel="prefetch" href="/assets/js/204.255b43df.js"><link rel="prefetch" href="/assets/js/205.000fb7ac.js"><link rel="prefetch" href="/assets/js/206.8f945829.js"><link rel="prefetch" href="/assets/js/207.74942b2e.js"><link rel="prefetch" href="/assets/js/208.329d8230.js"><link rel="prefetch" href="/assets/js/209.3fc54586.js"><link rel="prefetch" href="/assets/js/21.5f725cbd.js"><link rel="prefetch" href="/assets/js/210.1aa9659f.js"><link rel="prefetch" href="/assets/js/211.702df03f.js"><link rel="prefetch" href="/assets/js/212.ca95f208.js"><link rel="prefetch" href="/assets/js/213.024b4fa6.js"><link rel="prefetch" href="/assets/js/214.e2830dd8.js"><link rel="prefetch" href="/assets/js/215.0b646cb4.js"><link rel="prefetch" href="/assets/js/216.9bd6d019.js"><link rel="prefetch" href="/assets/js/217.586593b4.js"><link rel="prefetch" href="/assets/js/218.a2244829.js"><link rel="prefetch" href="/assets/js/219.1d858220.js"><link rel="prefetch" href="/assets/js/22.7d2b7a74.js"><link rel="prefetch" href="/assets/js/220.7f5e3dbd.js"><link rel="prefetch" href="/assets/js/221.d1f79d31.js"><link rel="prefetch" href="/assets/js/222.51d8a12c.js"><link rel="prefetch" href="/assets/js/223.797028ea.js"><link rel="prefetch" href="/assets/js/224.d925bf8b.js"><link rel="prefetch" href="/assets/js/225.cfe12606.js"><link rel="prefetch" href="/assets/js/226.b6bd41b4.js"><link rel="prefetch" href="/assets/js/227.15412d16.js"><link rel="prefetch" href="/assets/js/228.66af5157.js"><link rel="prefetch" href="/assets/js/229.cfb11559.js"><link rel="prefetch" href="/assets/js/23.1409c9f4.js"><link rel="prefetch" href="/assets/js/230.d2e613b5.js"><link rel="prefetch" href="/assets/js/231.85b8958b.js"><link rel="prefetch" href="/assets/js/232.42df48c8.js"><link rel="prefetch" href="/assets/js/233.d3be0c78.js"><link rel="prefetch" href="/assets/js/234.bb68d0be.js"><link rel="prefetch" href="/assets/js/235.bfd00052.js"><link rel="prefetch" href="/assets/js/236.3d58cc9d.js"><link rel="prefetch" href="/assets/js/237.d9af6062.js"><link rel="prefetch" href="/assets/js/238.54894974.js"><link rel="prefetch" href="/assets/js/239.b69669d0.js"><link rel="prefetch" href="/assets/js/24.e06b2b32.js"><link rel="prefetch" href="/assets/js/240.44f7b333.js"><link rel="prefetch" href="/assets/js/241.2d307b1a.js"><link rel="prefetch" href="/assets/js/242.47aecf42.js"><link rel="prefetch" href="/assets/js/243.b5afbb6e.js"><link rel="prefetch" href="/assets/js/244.8e04094f.js"><link rel="prefetch" href="/assets/js/245.78009475.js"><link rel="prefetch" href="/assets/js/246.eb7991c2.js"><link rel="prefetch" href="/assets/js/247.00c024fd.js"><link rel="prefetch" href="/assets/js/248.144c2842.js"><link rel="prefetch" href="/assets/js/249.35bae652.js"><link rel="prefetch" href="/assets/js/25.5e7aeaa8.js"><link rel="prefetch" href="/assets/js/250.854bde18.js"><link rel="prefetch" href="/assets/js/251.7cbb77f8.js"><link rel="prefetch" href="/assets/js/252.1ed96448.js"><link rel="prefetch" href="/assets/js/253.9d736b7d.js"><link rel="prefetch" href="/assets/js/254.137c6595.js"><link rel="prefetch" href="/assets/js/255.ac6865dc.js"><link rel="prefetch" href="/assets/js/256.055e06fd.js"><link rel="prefetch" href="/assets/js/257.63559614.js"><link rel="prefetch" href="/assets/js/258.b6958ba1.js"><link rel="prefetch" href="/assets/js/259.bc6da491.js"><link rel="prefetch" href="/assets/js/26.77d42111.js"><link rel="prefetch" href="/assets/js/260.a8e9559d.js"><link rel="prefetch" href="/assets/js/261.b051c6dd.js"><link rel="prefetch" href="/assets/js/262.e83c7ca8.js"><link rel="prefetch" href="/assets/js/263.bd14a165.js"><link rel="prefetch" href="/assets/js/264.65c3b624.js"><link rel="prefetch" href="/assets/js/265.db4371b9.js"><link rel="prefetch" href="/assets/js/266.97118d6c.js"><link rel="prefetch" href="/assets/js/267.de83cb0b.js"><link rel="prefetch" href="/assets/js/268.2bdd86cb.js"><link rel="prefetch" href="/assets/js/269.9c9a802f.js"><link rel="prefetch" href="/assets/js/27.fa37605f.js"><link rel="prefetch" href="/assets/js/270.f599f9fe.js"><link rel="prefetch" href="/assets/js/271.275d4619.js"><link rel="prefetch" href="/assets/js/272.ed0fabf6.js"><link rel="prefetch" href="/assets/js/273.fc279fbe.js"><link rel="prefetch" href="/assets/js/274.fe4b3d21.js"><link rel="prefetch" href="/assets/js/275.922677e1.js"><link rel="prefetch" href="/assets/js/276.597ceb81.js"><link rel="prefetch" href="/assets/js/277.71871d2e.js"><link rel="prefetch" href="/assets/js/278.10923657.js"><link rel="prefetch" href="/assets/js/279.cddbf2d7.js"><link rel="prefetch" href="/assets/js/28.7418a003.js"><link rel="prefetch" href="/assets/js/280.66542c64.js"><link rel="prefetch" href="/assets/js/281.c7ca5292.js"><link rel="prefetch" href="/assets/js/282.d105ef08.js"><link rel="prefetch" href="/assets/js/283.ae8d69c7.js"><link rel="prefetch" href="/assets/js/284.8763c337.js"><link rel="prefetch" href="/assets/js/285.cce4e007.js"><link rel="prefetch" href="/assets/js/29.42b5bf54.js"><link rel="prefetch" href="/assets/js/3.a2af090e.js"><link rel="prefetch" href="/assets/js/30.7fe0ece5.js"><link rel="prefetch" href="/assets/js/31.e05d012e.js"><link rel="prefetch" href="/assets/js/32.0a6466c6.js"><link rel="prefetch" href="/assets/js/33.8db270b1.js"><link rel="prefetch" href="/assets/js/34.c6e6ae70.js"><link rel="prefetch" href="/assets/js/35.8fc12d56.js"><link rel="prefetch" href="/assets/js/36.cb54baf3.js"><link rel="prefetch" href="/assets/js/37.656cb8eb.js"><link rel="prefetch" href="/assets/js/38.9152ff6b.js"><link rel="prefetch" href="/assets/js/39.f71e5e3d.js"><link rel="prefetch" href="/assets/js/4.02de3c47.js"><link rel="prefetch" href="/assets/js/40.3d664ab4.js"><link rel="prefetch" href="/assets/js/41.fc6e4f78.js"><link rel="prefetch" href="/assets/js/42.c17c3353.js"><link rel="prefetch" href="/assets/js/43.e78a329f.js"><link rel="prefetch" href="/assets/js/44.326a0948.js"><link rel="prefetch" href="/assets/js/45.67e6e1d4.js"><link rel="prefetch" href="/assets/js/46.85f71b1e.js"><link rel="prefetch" href="/assets/js/47.f2e524a6.js"><link rel="prefetch" href="/assets/js/48.843108ee.js"><link rel="prefetch" href="/assets/js/49.98713c95.js"><link rel="prefetch" href="/assets/js/5.f38c3daa.js"><link rel="prefetch" href="/assets/js/50.2c70898f.js"><link rel="prefetch" href="/assets/js/51.023fea5d.js"><link rel="prefetch" href="/assets/js/52.3877af4c.js"><link rel="prefetch" href="/assets/js/54.4cf45721.js"><link rel="prefetch" href="/assets/js/55.6894de94.js"><link rel="prefetch" href="/assets/js/56.48fd0f63.js"><link rel="prefetch" href="/assets/js/57.2c3b8155.js"><link rel="prefetch" href="/assets/js/58.fee976b4.js"><link rel="prefetch" href="/assets/js/59.d57c3ac9.js"><link rel="prefetch" href="/assets/js/6.a7d50f34.js"><link rel="prefetch" href="/assets/js/60.9954df49.js"><link rel="prefetch" href="/assets/js/61.1b870f60.js"><link rel="prefetch" href="/assets/js/62.37537ac3.js"><link rel="prefetch" href="/assets/js/63.5e7cfac8.js"><link rel="prefetch" href="/assets/js/64.407003ca.js"><link rel="prefetch" href="/assets/js/65.ba6c5d7d.js"><link rel="prefetch" href="/assets/js/66.2b5a751b.js"><link rel="prefetch" href="/assets/js/67.2faf15d0.js"><link rel="prefetch" href="/assets/js/68.19e50dcb.js"><link rel="prefetch" href="/assets/js/69.eec003cb.js"><link rel="prefetch" href="/assets/js/7.6c196c91.js"><link rel="prefetch" href="/assets/js/70.98d2461a.js"><link rel="prefetch" href="/assets/js/71.184225a4.js"><link rel="prefetch" href="/assets/js/72.956d136a.js"><link rel="prefetch" href="/assets/js/73.3e68378e.js"><link rel="prefetch" href="/assets/js/74.cec669e7.js"><link rel="prefetch" href="/assets/js/75.d418b5f0.js"><link rel="prefetch" href="/assets/js/76.f3f9ccd6.js"><link rel="prefetch" href="/assets/js/77.f24df03b.js"><link rel="prefetch" href="/assets/js/78.7eee67a8.js"><link rel="prefetch" href="/assets/js/79.8fadb3f7.js"><link rel="prefetch" href="/assets/js/8.b7eb2fb2.js"><link rel="prefetch" href="/assets/js/80.4f6165b0.js"><link rel="prefetch" href="/assets/js/81.49b03807.js"><link rel="prefetch" href="/assets/js/82.7ea07224.js"><link rel="prefetch" href="/assets/js/83.d6bd71b7.js"><link rel="prefetch" href="/assets/js/84.26db1aa8.js"><link rel="prefetch" href="/assets/js/85.c8f1f3bb.js"><link rel="prefetch" href="/assets/js/86.fd1c3c7f.js"><link rel="prefetch" href="/assets/js/87.38ab6ed9.js"><link rel="prefetch" href="/assets/js/88.f0a874e0.js"><link rel="prefetch" href="/assets/js/89.2b3352d4.js"><link rel="prefetch" href="/assets/js/9.d7ae4925.js"><link rel="prefetch" href="/assets/js/90.286cc7d4.js"><link rel="prefetch" href="/assets/js/91.c17c366b.js"><link rel="prefetch" href="/assets/js/92.29bc2389.js"><link rel="prefetch" href="/assets/js/93.6d335097.js"><link rel="prefetch" href="/assets/js/94.89ab26c7.js"><link rel="prefetch" href="/assets/js/95.f2493183.js"><link rel="prefetch" href="/assets/js/96.6662ec36.js"><link rel="prefetch" href="/assets/js/97.22c9d3f9.js"><link rel="prefetch" href="/assets/js/98.0b0b77a2.js"><link rel="prefetch" href="/assets/js/99.df5f5981.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e02fc531.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="前端档案" class="logo"> <span class="site-name can-hide">前端档案</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/fe/" class="nav-link">
  前端
</a></div><div class="nav-item"><a href="/be/" class="nav-link">
  后端
</a></div><div class="nav-item"><a href="/base/" class="nav-link">
  基础
</a></div><div class="nav-item"><a href="/tools/" class="nav-link">
  工具
</a></div><div class="nav-item"><a href="/resume/" class="nav-link">
  简历
</a></div><div class="nav-item"><a href="/experience/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  面经
</a></div><div class="nav-item"><a href="/technology/" class="nav-link">
  八股文
</a></div><div class="nav-item"><a href="/thinks/" class="nav-link">
  思考
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/fe/" class="nav-link">
  前端
</a></div><div class="nav-item"><a href="/be/" class="nav-link">
  后端
</a></div><div class="nav-item"><a href="/base/" class="nav-link">
  基础
</a></div><div class="nav-item"><a href="/tools/" class="nav-link">
  工具
</a></div><div class="nav-item"><a href="/resume/" class="nav-link">
  简历
</a></div><div class="nav-item"><a href="/experience/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  面经
</a></div><div class="nav-item"><a href="/technology/" class="nav-link">
  八股文
</a></div><div class="nav-item"><a href="/thinks/" class="nav-link">
  思考
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/experience/" aria-current="page" class="active sidebar-link">面经汇总</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/experience/#一、技巧性问题" class="sidebar-link">一、技巧性问题</a></li><li class="sidebar-sub-header"><a href="/experience/#背诵" class="sidebar-link">背诵</a></li><li class="sidebar-sub-header"><a href="/experience/#一般会问的三个问题" class="sidebar-link">一般会问的三个问题</a></li><li class="sidebar-sub-header"><a href="/experience/#二、技术性问题" class="sidebar-link">二、技术性问题</a></li><li class="sidebar-sub-header"><a href="/experience/#深浅拷贝" class="sidebar-link">深浅拷贝</a></li></ul></li><li><a href="/experience/baidu.html" class="sidebar-link">百度</a></li><li><a href="/experience/alibaba.html" class="sidebar-link">阿里</a></li><li><a href="/experience/tencent.html" class="sidebar-link">腾讯</a></li><li><a href="/experience/byte.html" class="sidebar-link">字节跳动</a></li><li><a href="/experience/jd.html" class="sidebar-link">京东</a></li><li><a href="/experience/didi.html" class="sidebar-link">滴滴</a></li><li><a href="/experience/fengchao.html" class="sidebar-link">丰巢科技</a></li><li><a href="/experience/kingsoft.html" class="sidebar-link">金山软件</a></li><li><a href="/experience/kuaishou.html" class="sidebar-link">快手</a></li><li><a href="/experience/kujiale.html" class="sidebar-link">酷家乐</a></li><li><a href="/experience/meituan.html" class="sidebar-link">美团</a></li><li><a href="/experience/pdd.html" class="sidebar-link">拼多多</a></li><li><a href="/experience/shopee.html" class="sidebar-link">虾皮</a></li><li><a href="/experience/toutiao.html" class="sidebar-link">头条</a></li><li><a href="/experience/tuzhan.html" class="sidebar-link">兔展</a></li><li><a href="/experience/wangyi.html" class="sidebar-link">网易</a></li><li><a href="/experience/youzan.html" class="sidebar-link">有赞</a></li><li><a href="/experience/yy.html" class="sidebar-link">YY</a></li><li><a href="/experience/codemao.html" class="sidebar-link">编程猫</a></li><li><a href="/experience/cvte.html" class="sidebar-link">CVTE</a></li><li><a href="/experience/others.html" class="sidebar-link">其他公司</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="面经汇总"><a href="#面经汇总" class="header-anchor">#</a> 面经汇总</h1> <p>路漫漫其修远兮，吾将上下而求索</p> <p>2021前端 = 安全+性能优化+http+算法+监控+源码</p> <div class="language-text extra-class"><pre class="language-text"><code>HR降低薪水：你的缺点是什么？
说出缺点=》如何发现=》做出的改变=》现在如何
例如：销售岗位，缺点是不擅长公开演讲，
</code></pre></div><h2 id="一、技巧性问题"><a href="#一、技巧性问题" class="header-anchor">#</a> 一、技巧性问题</h2> <h3 id="请问你的离职原因是什么"><a href="#请问你的离职原因是什么" class="header-anchor">#</a> 请问你的离职原因是什么？</h3> <ol><li>求发展 2.不可力抗（公司倒闭、公司搬家、女朋友在北京）</li></ol> <blockquote><p>寻求更好的发展，想去一个更大的平台，有专业的前端团队，和更多优秀的人工作，学习更多专业技能提升自己</p></blockquote> <h3 id="是否结婚-打算什么时候要孩子-如何兼顾家庭和工作"><a href="#是否结婚-打算什么时候要孩子-如何兼顾家庭和工作" class="header-anchor">#</a> 是否结婚？打算什么时候要孩子？如何兼顾家庭和工作？</h3> <blockquote><p>还没领证，顺其自然</p></blockquote> <h3 id="你是如何看待加班的"><a href="#你是如何看待加班的" class="header-anchor">#</a> 你是如何看待加班的？</h3> <blockquote><p>任何工作都免不了加班，但我会尽量提高工作效率，避免低效率导致的加班</p></blockquote> <h3 id="最近在研究什么技术吗"><a href="#最近在研究什么技术吗" class="header-anchor">#</a> 最近在研究什么技术吗？</h3> <h3 id="最近在看什么书"><a href="#最近在看什么书" class="header-anchor">#</a> 最近在看什么书？</h3> <blockquote><p>我比较喜欢看书，书上的知识比较全面，也比较权威，
但是有一些新技术书上没有，或者一些技术难点看书不是很理解，我也看一些视频教程、官方文档之类的
另外，用电脑看书，方便做笔记，遇到demo可以自己运行跑跑加深印象</p></blockquote> <h3 id="你还有什么问题要问"><a href="#你还有什么问题要问" class="header-anchor">#</a> 你还有什么问题要问？</h3> <blockquote><p>// HR
工资组成  福利待遇  岗位要求 新员工是否有培训  岗位今后的发展
// 面试官
公司部门的组织架构，前端有多少人
进入公司后具体做什么工作，什么项目，什么流程
自己的经历和能力是否符合公司的要求</p></blockquote> <h3 id="什么时间可以入职"><a href="#什么时间可以入职" class="header-anchor">#</a> 什么时间可以入职？</h3> <p>我需要等待前面几家公司的面试结果后，再给您答复。</p> <p>切记不要回答：随时可以入职，可能会降薪资</p> <h3 id="项目中遇到的难点-你是怎么解决的"><a href="#项目中遇到的难点-你是怎么解决的" class="header-anchor">#</a> 项目中遇到的难点，你是怎么解决的？</h3> <h3 id="你有什么好的代码习惯吗"><a href="#你有什么好的代码习惯吗" class="header-anchor">#</a> 你有什么好的代码习惯吗？</h3> <div class="language-text extra-class"><pre class="language-text"><code>可复用性 → 健壮性 → 低耦合性 → 避免幻数 → 注释
</code></pre></div><h3 id="你感觉你自己最擅长什么"><a href="#你感觉你自己最擅长什么" class="header-anchor">#</a> 你感觉你自己最擅长什么？</h3> <h3 id="请问你的缺点是什么"><a href="#请问你的缺点是什么" class="header-anchor">#</a> 请问你的缺点是什么？</h3> <h3 id="上家公司薪资-请问您的期望薪资是多少-为什么"><a href="#上家公司薪资-请问您的期望薪资是多少-为什么" class="header-anchor">#</a> 上家公司薪资，请问您的期望薪资是多少？为什么</h3> <p>我了解公司招聘前端的基础报价是15k，但是我入行早，在前端开发方面有较多的经验积累，所以我准备报20K。</p> <p>应届生（公司已经有固定标准）- 打太极：我相信，在我的持续努力之后，公司会给我相应合理的报酬。这也是对我的一个激励，希望你能帮忙争取。</p> <p>往届生 - 区间谈判法：</p> <ol><li>反问职位预算区间：你们这个职位的预算大概是多少？</li> <li>重复简历上写的薪资区间</li></ol> <h3 id="对未来有什么规划"><a href="#对未来有什么规划" class="header-anchor">#</a> 对未来有什么规划？</h3> <p>在业务上，做出更多的成绩；在专业领域里，让自己更有影响力。</p> <ol><li>持续优化xxx</li> <li>重构了xxx</li> <li>梳理xxx，总结xxx</li> <li>排查xxx问题</li> <li>改进了xxx逻辑，性能得到提升</li> <li>通过 xxx 降低了 xxx 至 xxx</li> <li>为了 xxx 重新设计了 xxx</li> <li>为了 xxx 通过 xxx 完成了 xxx</li> <li>通过 xxx 优化了 xxx 为 xxx</li> <li>为了 xxx 将 xxx 应用到了 xxx</li> <li>通过 xxx 提高了 xxx 至 xxx</li> <li>为了 xxx 通过 xxx 将 xxx 集成</li> <li>为了 xxx 通过 xxx 成立了 xxx</li></ol> <h4 id="典型问题"><a href="#典型问题" class="header-anchor">#</a> 典型问题</h4> <p>技术探底的问题肯定会问一些，此外面试每个人多会问：</p> <ol><li>哪个项目让你最满意、代表你的最高水平？如何做的？</li> <li>让你印象最深刻的一个（技术）难点，害的你搞了很久，最后怎么解的，有什么心得？</li> <li>你做的时间最久的一个项目（或产品），你看到这个项目有哪些问题，你能做什么？</li> <li>你能给我们团队或者产品带来什么？</li> <li>你觉得前端怎么样？？？</li></ol> <p>前端开发处于一个猛烈发展的阶段，现在可以说大部分的网站都在关注前端，前端是直接接触用户的部分， 它融合了设计、程序还有一些整体的理念，一些优化，包括SEO。很多技术的实现都要通过前端，怎么把这部分做好是非常具有挑战性的事情。可能四五年前很多人都还在标准的实现上摸索，而现在有一个大家都朝着标准走的大方向，就能够更好的坚持，更好的专注，把前端技术做得更强大。</p> <h4 id="突出亮点"><a href="#突出亮点" class="header-anchor">#</a> 突出亮点</h4> <ol><li>自己的经历和优势。</li> <li>自己做过的项目中的难点，怎么思考和解决的。</li> <li>自己的重大业绩，突破性成果，包括工作和学习。</li> <li>对面试的公司的理解和认识，如果有独特的理解肯定会加分。</li> <li>比赛成绩，国内排名，开源项目。</li></ol> <h2 id="背诵"><a href="#背诵" class="header-anchor">#</a> 背诵</h2> <ul><li><p><strong>基本信息</strong>：</p></li> <li><p><strong>工作经历</strong>：</p></li> <li><p><strong>技术优势/劣势</strong>：</p></li> <li><p><strong>性格优点/缺点</strong>：</p></li> <li><p><strong>技术难点/方案</strong>：</p></li> <li><p><strong>未来规划</strong>：</p></li> <li><p><strong>中意的项目</strong>：</p></li></ul> <h2 id="一般会问的三个问题"><a href="#一般会问的三个问题" class="header-anchor">#</a> 一般会问的三个问题</h2> <ol><li>自我介绍</li> <li>对我们产品了解吗？有什么看法？</li> <li>你有什么问我的吗？</li></ol> <h3 id="一、自我介绍部分"><a href="#一、自我介绍部分" class="header-anchor">#</a> 一、自我介绍部分</h3> <p>1、把之前的工作梳理清楚，介绍条理清晰，有详有略。要猜测面试官对你的哪项工作可能会感兴趣，并重点介绍。
2、一定要介绍所做某个事情的结果，并且最好有核心数据的支撑。这里主要考察面试者的复盘意识和目标感。
3、面试前一定要思考“我为什么要做这个事情”，这里考验的是面试者对于一个产品的远期思考。</p> <h3 id="二、对于产品看法部分"><a href="#二、对于产品看法部分" class="header-anchor">#</a> 二、对于产品看法部分</h3> <p>这个问题主要问两类人，一是行业跨度大的人，二是初入职场的人（该问题很容易让萌新翻盘）。要亲身体验使用产品，了解产品本身的优缺点和竞争对手的优缺点，培养这部分的SENSE可以多看36氪和虎嗅等媒体的文章。</p> <h3 id="三、问面试官的问题"><a href="#三、问面试官的问题" class="header-anchor">#</a> 三、问面试官的问题</h3> <p>主要考察求职者的格局观大小，求职者的提问要体现自身的好奇心和上进心，而不是一上来就问：加班吗？上下班时间？岗位是做什么的？
一个讨巧的办法就是反问面试官曾经提出的问题，比如增长方向是什么？长期目标是什么？平时主要看什么数据？
或者问面试官对自己的评价或者本次面试表现。</p> <h4 id="提问环节"><a href="#提问环节" class="header-anchor">#</a> 提问环节</h4> <ol><li>可以问本职岗位工作要求、职责。</li> <li>可以问公司、公司的业务、体系、行业、客户。</li> <li>可以问什么时候面试结果通知。</li> <li>切忌纠缠薪资待遇。</li> <li>如果你对公司所在行业以及业务能够提出一些好的问题也会加分</li></ol> <h3 id="四、其他"><a href="#四、其他" class="header-anchor">#</a> 四、其他</h3> <p>一是坦诚，不要强行回答。二是不要放低面试姿态。</p> <h4 id="是否面试其他公司-是否有其他公司的offer"><a href="#是否面试其他公司-是否有其他公司的offer" class="header-anchor">#</a> 是否面试其他公司？是否有其他公司的offer</h4> <p>已经面试了很多家公司，但感觉都不是很合适，想找一家能完全施展我能力的公司</p> <h4 id="离职原因"><a href="#离职原因" class="header-anchor">#</a> 离职原因</h4> <h2 id="二、技术性问题"><a href="#二、技术性问题" class="header-anchor">#</a> 二、技术性问题</h2> <p>引导面试官问自己擅长的问题</p> <h3 id="如何解决开发痛点-提升效率-基础建设方面"><a href="#如何解决开发痛点-提升效率-基础建设方面" class="header-anchor">#</a> 如何解决开发痛点，提升效率？（基础建设方面）</h3> <h3 id="这个需求怎么做-现场出题-还有其他方案吗-哪个方案最好-为什么"><a href="#这个需求怎么做-现场出题-还有其他方案吗-哪个方案最好-为什么" class="header-anchor">#</a> 这个需求怎么做？（现场出题）还有其他方案吗？哪个方案最好？为什么？</h3> <h3 id="框架的优劣比较-原理比较"><a href="#框架的优劣比较-原理比较" class="header-anchor">#</a> 框架的优劣比较/原理比较？</h3> <h3 id="页面白屏监控"><a href="#页面白屏监控" class="header-anchor">#</a> 页面白屏监控？</h3> <h3 id="页面加载时长"><a href="#页面加载时长" class="header-anchor">#</a> 页面加载时长？</h3> <p>参考 ：<a href="https://www.jianshu.com/p/0e3a851ed711" target="_blank" rel="noopener noreferrer">Navigation Timing 获取页面加载各个阶段所需时间<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> loadTime <span class="token operator">=</span>
    window<span class="token punctuation">.</span>performance<span class="token punctuation">.</span>timing<span class="token punctuation">.</span>domContentLoadedEventEnd <span class="token operator">-</span>
    window<span class="token punctuation">.</span>performance<span class="token punctuation">.</span>timing<span class="token punctuation">.</span>navigationStart<span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>loadTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="捕捉-js-异常"><a href="#捕捉-js-异常" class="header-anchor">#</a> 捕捉 js 异常？</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">try</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token keyword">catch</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token keyword">finally</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">throw</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><ul><li>前端相关无障碍</li></ul> <div class="language-text extra-class"><pre class="language-text"><code>1. 字体可放大
2. 语音搜索
3. 操作指导
4. 了解wai
</code></pre></div><h3 id="动态表单"><a href="#动态表单" class="header-anchor">#</a> 动态表单？</h3> <p>参考我们的：<a href="https://www.xuanwuku.com/product/pt.shtml" target="_blank" rel="noopener noreferrer">玄武库代码生成器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-text extra-class"><pre class="language-text"><code>1. 前端动态表单，如 el-form，组件封装
2. 后台的根据数据库表生成，的增删查改
</code></pre></div><h3 id="活动推荐页-怎么统计-埋点"><a href="#活动推荐页-怎么统计-埋点" class="header-anchor">#</a> 活动推荐页，怎么统计，埋点？</h3> <div class="language-text extra-class"><pre class="language-text"><code>onclick  如果是a连接呢
存哪儿
了解淘宝的做法吗
浏览器指纹
IP推送
匿名推送可能造成无效推送，但总没有好
</code></pre></div><h2 id="深浅拷贝"><a href="#深浅拷贝" class="header-anchor">#</a> 深浅拷贝</h2> <blockquote><p>涉及面试题：什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？</p></blockquote> <p>对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个情况。</p> <blockquote><p>知识点：栈和堆，基本类型和引用类型，字符串是直接存在栈里，object 是存在堆里，把地址存栈里</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a<span class="token punctuation">;</span>
a<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span>
</code></pre></div><h3 id="浅拷贝"><a href="#浅拷贝" class="header-anchor">#</a> 浅拷贝</h3> <p>首先可以通过 Object.assign 来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign 只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不是深拷贝。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
</code></pre></div><p>另外我们还可以通过展开运算符 ... 来实现浅拷贝</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>a <span class="token punctuation">}</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>age <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
</code></pre></div><p>通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就可能需要使用到深拷贝了</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  jobs<span class="token operator">:</span> <span class="token punctuation">{</span>
    first<span class="token operator">:</span> <span class="token string">&quot;FE&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>a <span class="token punctuation">}</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>jobs<span class="token punctuation">.</span>first <span class="token operator">=</span> <span class="token string">&quot;native&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>jobs<span class="token punctuation">.</span>first<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// native</span>
</code></pre></div><p>浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到最开始的话题了，两者享有相同的地址。要解决这个问题，我们就得使用深拷贝了。</p> <h3 id="深拷贝"><a href="#深拷贝" class="header-anchor">#</a> 深拷贝</h3> <p>这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  jobs<span class="token operator">:</span> <span class="token punctuation">{</span>
    first<span class="token operator">:</span> <span class="token string">&quot;FE&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>jobs<span class="token punctuation">.</span>first <span class="token operator">=</span> <span class="token string">&quot;native&quot;</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>jobs<span class="token punctuation">.</span>first<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// FE</span>
</code></pre></div><p>但是该方法也是有局限性的：</p> <ul><li>会忽略 undefined</li> <li>会忽略 symbol</li> <li>不能序列化函数</li> <li>不能解决循环引用的对象</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token punctuation">{</span>
    c<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    d<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>c <span class="token operator">=</span> obj<span class="token punctuation">.</span>b<span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>e <span class="token operator">=</span> obj<span class="token punctuation">.</span>a<span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c <span class="token operator">=</span> obj<span class="token punctuation">.</span>c<span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>d <span class="token operator">=</span> obj<span class="token punctuation">.</span>b<span class="token punctuation">;</span>
obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>e <span class="token operator">=</span> obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">;</span>
<span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>如果你有这么一个循环引用对象，你会发现并不能通过该方法实现深拷贝</p> <p>在遇到函数、 <code>undefined</code> 或者 <code>symbol</code> 的时候，该对象也不能正常的序列化</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span>
  age<span class="token operator">:</span> <span class="token keyword">undefined</span><span class="token punctuation">,</span>
  sex<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">&quot;male&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">jobs</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">&quot;yck&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {name: &quot;yck&quot;}</span>
</code></pre></div><p>你会发现在上述情况中，该方法会忽略掉函数和 undefined。</p> <p>但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题。</p> <p>如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 MessageChannel</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">structuralClone</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">{</span> port1<span class="token punctuation">,</span> port2 <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MessageChannel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   port2<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token parameter">ev</span> <span class="token operator">=&gt;</span> <span class="token function">resolve</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
   port1<span class="token punctuation">.</span><span class="token function">postMessage</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
​
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
 a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
 b<span class="token operator">:</span> <span class="token punctuation">{</span>
   c<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
​
obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>d <span class="token operator">=</span> obj<span class="token punctuation">.</span>b
​
<span class="token comment">// 注意该方法是异步的</span>
<span class="token comment">// 可以处理 undefined 和循环引用对象</span>
<span class="token keyword">const</span> <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
 <span class="token keyword">const</span> clone <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">structuralClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>clone<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>当然你可能想自己来实现一个深拷贝，但是其实实现一个深拷贝是很困难的，需要我们考虑好多种边界情况，比如原型链如何处理、DOM 如何处理等等，所以这里我们实现的深拷贝只是简易版，并且我其实更推荐使用 lodash 的深拷贝函数。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">deepClone</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
 <span class="token keyword">function</span> <span class="token function">isObject</span><span class="token punctuation">(</span><span class="token parameter">o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> o <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">||</span> <span class="token keyword">typeof</span> o <span class="token operator">===</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> o <span class="token operator">!==</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
​
 <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isObject</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'非对象'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
​
 <span class="token keyword">let</span> isArray <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
 <span class="token keyword">let</span> newObj <span class="token operator">=</span> isArray <span class="token operator">?</span> <span class="token punctuation">[</span><span class="token operator">...</span>obj<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj <span class="token punctuation">}</span>
 Reflect<span class="token punctuation">.</span><span class="token function">ownKeys</span><span class="token punctuation">(</span>newObj<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
   newObj<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">isObject</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">:</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
​
 <span class="token keyword">return</span> newObj
<span class="token punctuation">}</span>
​
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
 a<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
 b<span class="token operator">:</span> <span class="token punctuation">{</span>
   c<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
   d<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> newObj <span class="token operator">=</span> <span class="token function">deepClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
newObj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">.</span>b<span class="token punctuation">.</span>c<span class="token punctuation">)</span> <span class="token comment">// 2</span>
</code></pre></div><h3 id="ssr"><a href="#ssr" class="header-anchor">#</a> SSR</h3> <p>nuxtjs -vue</p> <p>缺点：需要前端人员直接维护服务器，对服务器压力大（发烫等可能）</p> <h3 id="模块化理解"><a href="#模块化理解" class="header-anchor">#</a> 模块化理解</h3> <h3 id="前端设计模式"><a href="#前端设计模式" class="header-anchor">#</a> 前端设计模式</h3> <h3 id="其他问题"><a href="#其他问题" class="header-anchor">#</a> 其他问题</h3> <ul><li><p>pm2 基本用法，怎么监控：pm2 start npm --name &quot;unibid&quot; -- run start</p></li> <li><p>koa2 基本用法【背诵】：<a href="https://koa.bootcss.com/" target="_blank" rel="noopener noreferrer">https://koa.bootcss.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>websocket 怎么用，有什么 API：new WebSocket(&quot;wss://&quot;),onopen onerror onclose onmessage</p> <p>大方向</p></li></ul> <h3 id="jsbridge原理"><a href="#jsbridge原理" class="header-anchor">#</a> JSBridge原理</h3> <p>参考：<a href="https://www.cnblogs.com/songyao666/p/14540073.html" target="_blank" rel="noopener noreferrer">聊一聊桥接（JSBridge）的原理<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>JSBridge: 在<code>Hybrid</code>模式下，H5会经常需要使用<code>Native</code>的功能，比如打开二维码扫描、调用原生页面、获取用户信息等，同时Native也需要向Web端发送推送、更新状态等，而<code>JavaScript</code>是运行在单独的<code>JS Context</code>中<code>（Webview容器、JSCore等）</code>，与原生有运行环境的隔离，所以需要有一种机制实现Native端和Web端的双向通信，这就是<code>JSBridge</code>：<strong>以JavaScript引擎或Webview容器作为媒介，通过协定协议进行通信，实现Native端和Web端双向通信的一种机制。</strong></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新时间:</span> <span class="time">12/10/2021, 6:51:36 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/experience/baidu.html">
        百度
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.bf44e39b.js" defer></script><script src="/assets/js/2.db7a59af.js" defer></script><script src="/assets/js/53.3938d117.js" defer></script>
  </body>
</html>
